import React from "react";
import { StyleSheet, View, Text, Pressable } from "react-native";
import { useRouter } from "expo-router";
import { Ionicons } from "@expo/vector-icons";
import { Question } from "@/types/question";
import { useUserStore } from "@/store/user-store";
import { difficulties } from "@/mocks/questions";
import { useTheme } from "@/hooks/useTheme";
import Colors from "@/constants/colors";

interface QuestionCardProps {
  question: Question;
  showCategory?: boolean;
}

export default function QuestionCard({
  question,
  showCategory = true,
}: QuestionCardProps) {
  const router = useRouter();
  const { colors } = useTheme();
  const bookmarkedQuestions = useUserStore(
    (state) => state.bookmarkedQuestions
  );
  const toggleBookmark = useUserStore((state) => state.toggleBookmark);
  const isBookmarked = bookmarkedQuestions.includes(question.id);
  const difficultyInfo = difficulties.find((d) => d.id === question.difficulty);
  const handlePress = () => {
    router.push(`/question/${question.id}`);
  };
  const handleBookmark = (e: any) => {
    e.stopPropagation();
    toggleBookmark(question.id);
  };

  return (
    <Pressable
      style={({ pressed }) => [
        {
          backgroundColor: colors.card,
          borderRadius: 12,
          padding: 16,
          marginBottom: 12,
          borderWidth: 1,
          borderColor: colors.border,
        },
        pressed && { opacity: 0.8, backgroundColor: colors.Pressable.background }
      ]}
      onPress={handlePress}
    >
      <View style={styles.header}>
        {showCategory && (
          <Text style={[styles.category, { color: colors.subtext }]}>{question.category.toUpperCase()}</Text>
        )}
        <View
          style={[
            styles.difficultyBadge,
            { backgroundColor: difficultyInfo?.color || colors.border },
          ]}
        >
          <Text style={[styles.difficultyText, { color: colors.text }]}>
            {difficultyInfo?.name || question.difficulty}
          </Text>
        </View>
      </View>
      <Text style={[styles.questionText, { color: colors.text }]} numberOfLines={3}>
        {question.question}
      </Text>
      <View style={styles.footer}>
        <Pressable
          style={styles.bookmarkButton}
          onPress={handleBookmark}
          hitSlop={10}
        >
          {isBookmarked ? (
            <Ionicons name="bookmark" size={20} color={colors.primary} />
          ) : (
            <Ionicons name="bookmark-outline" size={20} color={colors.subtext} />
          )}
        </Pressable>
        <View style={styles.arrowContainer}>
          <Ionicons name="chevron-forward" size={18} color={colors.primary} />
        </View>
      </View>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  header: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginBottom: 12,
  },
  category: {
    fontSize: 12,
    fontWeight: "600",
    textTransform: "uppercase",
  },
  difficultyBadge: {
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 4,
  },
  difficultyText: {
    fontSize: 12,
    fontWeight: "600",
  },
  questionText: {
    fontSize: 16,
    fontWeight: "500",
    marginBottom: 16,
    lineHeight: 22,
  },
  footer: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  bookmarkButton: {
    padding: 4,
  },
  arrowContainer: {
    padding: 4,
  },
});
